<template>
    <view>
        <!-- 固定定位的导航栏 -->
        <view class="navbar-fixed" :style="navbarStyle" v-if="fixed">
            <!-- 状态栏占位 -->
            <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

            <!-- 导航栏内容 -->
            <view class="navbar-content" :style="navbarContentStyle">
                <!-- 左侧内容 -->
                <view class="navbar-left" @click="leftClick" v-if="showBack">
                    <slot name="left">
                        <view class="left_content">
                            <uni-icons type="left" :color="leftIconColor" size="20"></uni-icons>
                        </view>
                    </slot>
                </view>

                <!-- 中间标题 -->
                <view class="navbar-center" :style="centerStyle">
                    <slot name="default">
                        <view class="center_title" :style="{ color: color }">
                            {{ title }}
                        </view>
                    </slot>
                </view>

                <!-- 右侧内容 -->
                <view class="navbar-right" v-if="!isMp">
                    <slot name="right"></slot>
                </view>
            </view>
        </view>

        <!-- 非固定定位的导航栏 -->
        <view class="navbar-relative" :style="navbarRelativeStyle" v-else>
            <!-- 状态栏占位 -->
            <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

            <!-- 导航栏内容 -->
            <view class="navbar-content" :style="navbarContentStyle">
                <!-- 左侧内容 -->
                <view class="navbar-left" @click="leftClick" v-if="showBack">
                    <slot name="left">
                        <view class="left_content">
                            <uni-icons type="left" :color="leftIconColor" size="20"></uni-icons>
                        </view>
                    </slot>
                </view>

                <!-- 中间标题 -->
                <view class="navbar-center" :style="centerStyle">
                    <slot name="default">
                        <view class="center_title" :style="{ color: color }">
                            {{ title }}
                        </view>
                    </slot>
                </view>

                <!-- 右侧内容 -->
                <view class="navbar-right" v-if="!isMp">
                    <slot name="right"></slot>
                </view>
            </view>
        </view>

        <!-- 占位空间（仅在固定定位时显示，在文档流中占位） -->
        <view class="navbar-placeholder" v-if="fixed" :style="placeholderStyle"></view>
    </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

// 获取系统信息
const systemInfo = ref({});
const menuButtonInfo = ref({});
const statusBarHeight = ref(0);
const navbarHeight = ref(44); // 默认导航栏高度

const props = defineProps({
    // 标题
    title: {
        type: String,
        default: ''
    },
    // 左侧文字
    leftText: {
        type: String,
        default: ''
    },
    // 右侧文字
    rightText: {
        type: String,
        default: ''
    },
    // 图标和文字颜色
    color: {
        type: String,
        default: '#000000'
    },
    // 导航栏背景颜色
    backgroundColor: {
        type: String,
        default: '#FFFFFF'
    },
    // 导航栏下是否有边框
    border: {
        type: Boolean,
        default: false
    },
    // 导航栏是否固定在顶部
    fixed: {
        type: Boolean,
        default: true
    },
    // 点击左侧图标是否返回
    autoBack: {
        type: Boolean,
        default: true
    },
    // 左侧图标颜色
    leftIconColor: {
        type: String,
        default: '#333333'
    },
    // 是否显示返回按钮
    showBack: {
        type: Boolean,
        default: true
    }
});

const emit = defineEmits(['leftClick']);

// 判断是否为小程序环境
const isMp = computed(() => {
    // #ifdef MP-WEIXIN
    return true;
    // #endif
    // #ifndef MP-WEIXIN
    return false;
    // #endif
});

// 固定定位导航栏样式
const navbarStyle = computed(() => {
    return {
        backgroundColor: props.backgroundColor,
        borderBottom: props.border ? '1px solid #e5e5e5' : 'none',
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 999
    };
});

// 相对定位导航栏样式
const navbarRelativeStyle = computed(() => {
    return {
        backgroundColor: props.backgroundColor,
        borderBottom: props.border ? '1px solid #e5e5e5' : 'none',
        position: 'relative',
        width: '100%'
    };
});

// 导航栏内容样式
const navbarContentStyle = computed(() => {
    return {
        height: navbarHeight.value + 'px',
        paddingRight: isMp.value ? (systemInfo.value.windowWidth - menuButtonInfo.value.left) + 'px' : '16px'
    };
});

// 中间标题样式
const centerStyle = computed(() => {
    if (isMp.value && menuButtonInfo.value.left) {
        // 小程序环境下，标题区域需要避开胶囊按钮
        const leftWidth = props.showBack ? 88 : 16; // 左侧返回按钮或边距宽度
        const rightWidth = systemInfo.value.windowWidth - menuButtonInfo.value.left; // 右侧胶囊按钮区域宽度
        const maxWidth = systemInfo.value.windowWidth - leftWidth - rightWidth;

        return {
            maxWidth: maxWidth + 'px',
            marginLeft: 'auto',
            marginRight: 'auto'
        };
    }
    return {};
});

// 占位空间样式
const placeholderStyle = computed(() => {
    return {
        height: (statusBarHeight.value + navbarHeight.value) + 'px',
        width: '100%'
    };
});

onMounted(() => {
    initNavbar();
});

// 初始化导航栏
const initNavbar = () => {
    // 获取系统信息
    uni.getSystemInfo({
        success: (res) => {
            systemInfo.value = res;
            statusBarHeight.value = res.statusBarHeight || 0;

            // #ifdef MP-WEIXIN
            // 小程序环境下获取胶囊按钮信息
            const menuButton = uni.getMenuButtonBoundingClientRect();
            menuButtonInfo.value = menuButton;

            // 计算导航栏高度：胶囊按钮高度 + 上下边距
            const gap = menuButton.top - res.statusBarHeight;
            navbarHeight.value = menuButton.height + gap * 2;
            // #endif

            // #ifndef MP-WEIXIN
            // 非小程序环境使用默认高度
            navbarHeight.value = 44;
            // #endif
        }
    });
};

// 左侧点击事件
const leftClick = () => {
    emit('leftClick');

    if (props.autoBack) {
        const pages = getCurrentPages();
        if (pages.length > 1) {
            uni.navigateBack({
                delta: 1
            });
        } else {
            // 如果没有上一页，可以跳转到首页
            uni.reLaunch({
                url: '/pages/home'
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.navbar-fixed,
.navbar-relative {
    width: 100%;

    .status-bar {
        width: 100%;
        background-color: inherit;
    }

    .navbar-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 16px;
        box-sizing: border-box;

        .navbar-left {
            display: flex;
            align-items: center;
            min-width: 72px;
            height: 100%;

            .left_content {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 16px;
                background-color: rgba(0, 0, 0, 0.05);
                transition: background-color 0.3s ease;

                &:active {
                    background-color: rgba(0, 0, 0, 0.1);
                }
            }
        }

        .navbar-center {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 0 16px;
            box-sizing: border-box;

            .center_title {
                font-size: 32rpx;
                font-weight: 600;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.4;
            }
        }

        .navbar-right {
            display: flex;
            align-items: center;
            min-width: 72px;
            height: 100%;
            justify-content: flex-end;
        }
    }
}

// 占位空间
.navbar-placeholder {
    width: 100%;
    background-color: transparent;
}

// 小程序特殊适配
/* #ifdef MP-WEIXIN */
.navbar-fixed,
.navbar-relative {
    .navbar-content {
        .navbar-center {
            // 小程序下标题居中时需要特殊处理
            position: relative;

            .center_title {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                max-width: 100%;
            }
        }
    }
}

/* #endif */
</style>
